<template>
	<view class="topic-list" :style="{paddingTop:navHeight}">
		<view class="top-nav-box" :style="{height:navHeight, paddingTop:statusBarHeight}">
			<image v-if="share==1||pageNum<=1" class="top-nav-back" src="../../static/images/icon_float_home.png"
				@click="goHome"></image>
			<image v-else class="top-nav-back" src="../../static/images/icon_user_back.png" @click="getback"></image>
		</view>
		<view class="topic-banner" :style="{marginTop:marginTop}">
			<image :src="bgImage" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view class="list-box">
			<view class="search-box" @click="goUrl('/pages/goods_search/goods_search')">
				<u-search class="content" wrap-bg-color="#fff" bg-color="#fff" search-icon-color="#ff8576"
					shape="square" :height="70" placeholder-color="#ababab">
				</u-search>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{
        use: false,
        toTop: {
          bottom: '300rpx',
        },
      }">
				<view class="main">
					<view class="goods_list_area m-t-20" v-for="(item,index) in goodsList" :key="index">
						<view class="goods_area_head">
							<view class="goods_area_title">{{item.name}}</view>
							<router-link
								:to="'/pages/active_list/active_list?type=hot&title='+item.name+'&'+(shopThemeId?'shopThemeId':'shopCateId')+'='+item.id">
								<view class="goods_area_more">更多<text
										style="margin-left: 10rpx;font-weight: 700;transform: scale(1, 1.5);">></text>
									</image>
								</view>
							</router-link>
						</view>
						<view class="goods_area_body">
							<view class="goods_list_cell" v-for="(cell, idx) in item.goods" :key="idx" v-if="idx<12">
								<router-link
									:to="{path: '/pages/goods_details/goods_details', query: {id: cell.goods_id || cell.id}}">
									<view class="goods-img">
										<u-image width="158rpx" height="196rpx" :src="cell.image"></u-image>
									</view>
									<view class="goods-info">
										<view class="goods-name line-1">{{cell.name}}</view>
										<view class="goods-price">
											<price-format :color="colorConfig.primary" :first-size="26"
												:second-size="26" :subscript-size="22" :price="cell.min_price">
											</price-format>
											<price-format :color="colorConfig.muted"
												v-if="cell.min_price!=cell.origin_price" :first-size="26"
												:second-size="26" :subscript-size="22" line-through
												:price="cell.origin_price" style="margin-left: 10rpx;"></price-format>
										</view>
									</view>
								</router-link>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getSecondThemeList,
		getSecondCategoryList
	} from '@/api/store';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					empty: {
						icon: "/static/images/goods_null.png",
						tip: "暂无商品～"
					}
				},
				bgImage: '',
				goodsList: [],
				type: '',
				title: '',
				shopCateId: '',
				shopThemeId: '',
				share: 0,
				pageNum:1
			};
		},
		computed: {
			...mapGetters(['sysInfo']),
			statusBarHeight() {
				return this.sysInfo.statusBarHeight + 'px'
			},
			navHeight() {
				return this.sysInfo.navHeight + 'px'
			},
			marginTop() {
				return '-' + (this.sysInfo.navHeight) + 'px'
			},
		},
		async onShareAppMessage() {
			const {
				type,
				title,
				shopCateId,
				shopThemeId,
			} = this;
			return {
				title: title,
				path: '/pages/topic_list/topic_list' + '?type=hot&title=' + title + '&' + (shopThemeId ?
					'shopThemeId=' + shopThemeId : 'shopCateId=' + shopCateId) + '&share=1'
			};
		},
		onLoad() {
			this.type = this.$Route.query.type;
			this.title = this.$Route.query.title;
			this.shopCateId = this.$Route.query.shopCateId;
			this.shopThemeId = this.$Route.query.shopThemeId;
			this.share = this.$Route.query.share;
			this.pageNum = getCurrentPages().length;
			uni.$on("refreshhome", () => {
				this.downCallback();
			});
		},
		methods: {
			async downCallback() {
				this.getShopCategoryFun()
				this.mescroll.endSuccess(0, false);
			},
			async getShopCategoryFun() {
				if (this.shopThemeId) {
					const params = {
						theme_id: this.shopThemeId
					}
					const {
						code,
						data
					} = await getSecondThemeList(params);
					if (code == 1) {
						this.bgImage = data.bg_image;
						this.goodsList = data.lists;
					}
				} else {
					const params = {
						category_id: this.shopCateId
					}
					const {
						code,
						data
					} = await getSecondCategoryList(params);
					if (code == 1) {
						this.goodsList = data.lists;
					}
				}
			},
			goUrl(url) {
				this.$Router.push({
					path: url
				})
			},
			getback() {
				if (this.share) {
					uni.switchTab({
						url: "/pages/index/index"
					});
				} else {
					//#ifdef H5
					this.$router.go(-1); //返回上一层
					//#endif

					//#ifdef MP-WEIXIN
					uni.navigateBack({
						delta: 1
					});
					//#endif	
				}
			},
			goHome() {
				uni.switchTab({
					url: "/pages/index/index"
				});
			}
		}
	};
</script>
<style lang="scss">
	.topic-list {
		.topic-banner {
			width: 100%;
			text-align: center;
		}

		.top-nav-box {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding-left: 32rpx;
			padding-right: 200rpx;
			top: 0;
			z-index: 1;

			.top-nav-back {
				width: 58rpx;
				height: 58rpx;
			}
		}

		.list-box {
			padding: 20rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;

			.goods_list_area {
				padding: 20rpx 20rpx 0 20rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.goods_area_head {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.goods_area_title {
						width: 520rpx;
						font-size: 30rpx;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.goods_area_more {
						display: flex;
						align-items: baseline;
						font-size: 24rpx;
						color: #ababab;
					}
				}

				.goods_area_body {
					padding-top: 20rpx;

					.goods_list_cell {
						display: inline-block;
						width: 158rpx;
						margin-right: 12rpx;
						margin-bottom: 20rpx;

						&:nth-child(4n+4) {
							margin-right: 0;
						}

						.goods-info {
							margin-top: 10rpx;

							.goods-name {
								font-size: 24rpx;
							}

							.goods-price {
								display: flex;
								margin-top: 10rpx;
								padding-right: 16rpx;
							}
						}
					}
				}
			}
		}
	}
</style>